import React, { ReactElement, useEffect } from 'react';
import { NavigationScreenProps } from 'react-navigation';

import Provider from './reducer';

import styles from './style';
import List from './components/List';
import { getLessons } from './actions';
import Notch, { NotchType } from '../../components/Notch';
import NavBar from '../../components/NavBar';

export default (props: NavigationScreenProps): ReactElement => {
  const { navigation } = props;
  const courseId = navigation.getParam('courseId');

  useEffect((): (() => void) => {
    getLessons(courseId);

    const didFocusSubscription = navigation.addListener(
      'willFocus',
      (): void => {
        getLessons(courseId);
      }
    );

    return (): void => {
      didFocusSubscription.remove();
    };
  }, [courseId, navigation]);
  return (
    <Provider>
      <Notch style={styles.container} type={NotchType.Top}>
        <NavBar title="课程列表" />
        <List />
      </Notch>
    </Provider>
  );
};
